 <template>
  <div class="store-detail">
      <nav-bar>
          <template v-slot:left>
              <van-icon name="arrow-left" @click="backHome" />
          </template>
          <template v-slot:center>店铺</template>
      </nav-bar>
   <keep-alive>
             <div class="content">
        <div class="img"></div>
      <div class="foodClassify">
        <div class="name">
          {{ title }}
          <img :src="img" class="store_img" alt="" />
        </div>
        <van-tabs color="#ffc400">
        <van-tab v-for="(item,index) in storeData" :key="index" :title="item.name">
           <food-list :index="index" :food-data="item.data"></food-list>
        </van-tab>
      </van-tabs>
      </div>
    </div>
   </keep-alive>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" @click="service"/>
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="Goodslength" @click="toCart" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
      <van-action-bar-button type="danger" text="立即购买" @click="buyNow" />
</van-action-bar>
  </div>
</template>

<script>
import NavBar from '../components/common/NavBar.vue'
import FoodList from '../components/content/FoodList.vue'
import {Toast} from 'vant'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {reactive,toRefs,computed} from 'vue'
export default {
   name:'Store',
   components:{
       NavBar,
       FoodList
   },
    setup() {
    const router = useRouter()
    const store = useStore()
    let data = reactive({
      title: "鱼拿酸菜鱼",
      img: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
      storeData: [
        {
          name: "点菜",
          data: {
            content: "点菜",
            items: [
              {
                text: "热销套餐",
                children: [
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "招牌酸菜鱼",
                    num: 0,
                    price: 25.0,
                    id: 0,
                    add: true,
                  },
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "藤椒酸菜鱼",
                    num: 0,
                    price: 25.0,
                    id: 1,
                    add: true,
                  },
                ],
              },
              {
                text: "澳洲肥牛",
                children: [
                  {
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F8694a4c27d1ed21b0ef4f3137f24cac451da80cb91b8&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645407747&t=ea2c9f772ba0df3a2d1b00b962875460",
                    title: "酸汤肥牛",
                    num: 0,
                    price: 25.0,
                    id: 3,
                    add: true,
                  },
                  {
                    pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F8694a4c27d1ed21b0ef4f3137f24cac451da80cb91b8&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645407747&t=ea2c9f772ba0df3a2d1b00b962875460",
                    title: "香辣肥牛",
                    num: 0,
                    price: 25.0,
                    id: 4,
                    add: true,
                  },
                ],
              },
              {
                text: "超级折扣",
                children: [
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "无骨酸菜鱼+肥牛双拼",
                    num: 0,
                    price: 25.0,
                    id: 5,
                    add: true,
                  },
                  {
                    pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
                    title: "香辣水煮鱼+肥牛双拼",
                    num: 0,
                    price: 25.0,
                    id: 6,
                    add: true,
                  },
                ],
              },
            ],
          },
        },
        { name: "评价", data: { content: "评价" } },
        { name: "商家", data: { content: "商家" } },
      ],
    });
    
    function backHome(){
     router.push('/home');
    }

    // 商品个数
    const Goodslength = computed(()=>{
      return store.state.cartList.length;
    })
    // 客服的点击
    function service(){
      Toast.fail('敬请期待....')
    }
    // 加入购物车
       function addCart(type){
         let newList = []
           data.storeData.forEach(item=>{
             item.data.items?.forEach(item1=>{
               item1.children.forEach(item2=>{
                   if(item2.num > 0){
                     newList.push(item2)
                   }
               })
             })
           })   
        if(newList.length==0){
          Toast('请选择商品')
          return ;
         }
        store.commit('ADD_CART',newList)    
        type==='buy'?toCart():Toast.success('添加成功');
      }

    // 跳转购物车
     function toCart(){
      router.push('/cart')
     }
    //  立即购买
      function  buyNow(){
          addCart('buy');
      }
    return {
      ...toRefs(data),
      backHome,
      service,addCart,
      buyNow,
      toCart,
      Goodslength
    };
  },
}
</script>

<style lang="less" scoped>
/deep/ .van-tabs__wrap{
  border-radius: 10px;
}
  .store-detail{
      background-image: linear-gradient(#fff,#f4f4f4);
.content {
    flex: 1;
    overflow-y: auto;
    .img {
      background: url('../assets/image/yuna.jpg') no-repeat center/cover;
      width: 100%;
      height: 150px;
    }
    .foodClassify {
      height: 500px;
      background-color: #fff;
      margin-top: -30px;
      border-radius: 20px 20px 0 0;

      .classify {
        margin-top: 10px;
      }
      .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        .store_img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin-top: -30px;
        }
      }
    }
  }
  }
</style>